<template>
  <div class="">
   <Row>
        <Col span="12" class="title clearfix">冷冻存储</Col>   
   </Row>
    <div class="line"></div>
   	<div class="MainBox">

	<Form :model="FreezingStorage" label-position="left" :label-width="50">
   		 <Row>
	        	<div class="clearfix" >
	        		<p style="float:left; margin-bottom:10px; margin-top:5px" >冷冻情况列表</p>
	        		<Button type="ghost" 
			        		style="float:right; margin-bottom:10px" 
			        		class="pinkButton" 
			        		size="small"
			        		@click="openItem(-1)">新增</Button>
	        	</div>

	        </Row>
   		<Table border :columns="columns" :data="FreezingStorage.data" size="small" ></Table>

   		

   		<Modal v-model="detailVisible" title="新增/修改促排详情">
	        		
   					<freezing-detail ref="freezingdetail" 

   					v-bind:FreezingStorage = "FreezingStorage"></freezing-detail>
		           	<div slot="footer">
		           		<Button type="ghost" class="pinkButton" size="small" @click="updateItem" >保存</Button>
			            <Button type="ghost" size="small" @click="cancelDetail">取消</Button>
			        </div>
   		</Modal>
   			 
   	</Form>

   	</div>
  </div>
</template>
<script>
import UploadHelper from '../components/UploadHelper'
import FreezingDetail from '../components/FreezingDetail'
import Store from '../store'
import SubmitButton  from "../components/SubmitButton"
import api from '../js/axios-module'
export default {

  data () {
    return {
    	changeIndex:-1,
		FreezingStorage:{
			data: []
		},
        columns: [
            {	width:'70px',
                title: '类型',
                key: 'type'
            },
            {
                title: '上传报告',
                key: 'picture',

                render: (h, params) => {
                	let children = [];
    				
    				for (var i = this.FreezingStorage.data[params.index].rusultlist.length - 1; i >= 0; i--) {
    				
    					children.push(h('img', {
            		
		                	    attrs:{
		                			src:baseURL+this.FreezingStorage.data[params.index].rusultlist[i].url
		                		},style: {
		                        	width: '54px',
									height: '54px'    
		                        }

	            			},"")) 

    					
    				}
			
            	
                return h('div', {},children);
              	}
            },
            {	width:'70px',
            	key:"detail",
                title: '查看详情',
                align: 'center',
                render: (h, params) => {
                	let children = [];
                	children.push(h('Button', {
                            props: {
                                type: 'ghost',
                                size: 'small'
                            },
                            class:['pinkButton'],
                            style: {
                            	'margin-Top': '5px',
                                'margin-Bottom': '5px',
                                
                            },
                            on: {
                                click: () => {
                                   this.openItem(params.index);
                                   
                                }
                            }
                        }, '查看'));

                    return h('div', {},children);
                }
            }
        ],
        detailVisible:false

        
    }

  },
  created: function () {




      var item = Store.fetch(Store.FREEZINGSTORAGE_KEY)
      if (item.data !=null) {
        this.FreezingStorage = item
      }else{
         item.data = [];
         this.FreezingStorage = item  
      }   
       
   },
  methods:{ 
  	getData: function () {
      api.getFreezingStorage().then(response => {
      		var list = response.data.data.frozen
      		var pic = response.data.data.resource
     	
      		for (var i = list.length - 1; i >= 0; i--) {
      			if(list[i].type==null){continue}

      			var item = list[i]
      			//生成图片数组
      			var arr = new Array()
      			for(var a in pic[list[i]["id"]]){
      				arr.push(pic[list[i]["id"]][a])
      			}
      			//内容数组精子数量
      			var contentList = new Array()
				contentList[0]=	item.data.date
      			if (item.type =='精子冷冻') {
					contentList[1]= item.data.spermnumber
					contentList[2]= item.data.spermdensity
					contentList[3]= item.data.time
      			}else if(item.type == '卵子冷冻'){
					contentList[1] = item.data.eggnumber
					contentList[2] = item.data.time

      			}else if(item.type == '胚胎冷冻'){
					contentList[1] = item.data.embryonumber
					contentList[2] = item.data.embryograde
					contentList[3] = item.data.embryosex 
					contentList[4] = item.data.time
      			}
      			console.log(item)
				this.FreezingStorage.data.push({
					id:item.id,
					type:item.type,
					date:item.data.date,
					contentList:contentList,
					rusultlist:arr
				})

				// var item = list[i].data
				// item.date
				// item.spermdensity
				// item.spermnumber
				// item.time


      		}
        
      },err=>{
        this.$Message.error('获取数据失败,请稍后再试');
      })

    },

	openItem:function(number){

		this.detailVisible = true;
		this.$refs.freezingdetail.openItem(number);
		this.changeIndex = number;
	},updateItem:function(){
		
		this.detailVisible = false;
		this.$refs.freezingdetail.updateItem(this.changeIndex)
		this.changeIndex = -1;
	},cancelDetail:function(){
		this.detailVisible = false;
	}, submit:function(){
      console.log("submit")
    },
    cancel:function(){
      console.log("cancel")
    },

   },components:{UploadHelper,FreezingDetail,SubmitButton},
   watch:{
   		FreezingStorage:{
	        handler:function(FreezingStorage){
	        	
	        	  // Store.save(this.FreezingStorage,Store.FREEZINGSTORAGE_KEY);
	        },
	        deep:true
 		 }
   },mounted:function () {
    	this.getData()
  },

}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */

</style>